{{define "title"}}Auth Service - IP Allowlists{{end}}

{{define "content"}}

<script type="text/javascript" src="/ui/static/js/ip_allowlists.js"></script>

<div class="container px-0" id="content-box">
  <!-- Component to nest a loading spinner while fetching the allowlists. -->
  <div id="loading-box-placeholder"></div>

  <!-- Section to display the allowlist config upon successful response from
   the server. -->
  <div id="allowlists-content" style="display: none;">
    <div class="card">
      <div class="card-header">IP Allowlists</div>

      <div class="card-body px-4 py-0">
        <!-- Section with a selector and details to peruse the allowlists, if
         there are any configured. -->
        <div class="container-fluid" id="allowlists-config">
          <div class="row">
            <select class="form-select my-4" id="allowlist-selector">
            </select>
            <hr class="my-0" />
          </div>
          <div id="allowlist-pane">
            <div class="row my-4">
              <label class="form-label h5 px-0">
                Description
              </label>
              <input id="description-box" type="text" class="form-control" readonly name="description">
              </input>
            </div>
            <div class="row my-4">
              <label class="form-label h5 px-0">
                IP subnets
              </label>
              <textarea id="subnet-box" class="form-control font-monospace" rows="5" name="subnets" readonly wrap="off"></textarea>
            </div>
          </div>
        </div>

        <!-- Alert to show instead if the allowlists config is empty. -->
        <div id="empty-config-fallback" style="display: none;" class="alert alert-primary my-4" role="alert">
          <i class="bi bi-info-circle-fill me-1"></i>
          No allowlists have been configured.
        </div>

        <div class="container-fluid">
          <div class="row my-4">
            <hr />
            <div class="col px-0">
              <span>The configuration is distributed by
                <a target="_blank" href="https://config.luci.app">luci-config</a>.
              </span>
              <span id="revision-details">
                Using revision
                <a class="font-monospace" target="_blank"></a>.
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Placeholder for IP allowlists error. -->
  <div id="api-error-placeholder" class="my-4"></div>
</div>

{{end}}
